<template>
	<view class="">
		<!-- <back-fixed title="我的信息" urlBack='/pages/index/my'></back-fixed> -->
		<view class="main">
			<!-- <u-gap height="40" bg-color="#f8f8f8"></u-gap> -->
			<view class="card">
				<!-- <u-form :model="form" ref="uForm">
						<u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
						<u-form-item label="简介"><u-input v-model="form.intro" /></u-form-item>
					</u-form> -->
				<view class="avatar" @click="chooseAvatar" v-if="avatar.length > 0">
					<view class="p-l-24 aTitle">
						头像
					</view>
					<view class="av_img">
						<view class="img_box">
							<u-avatar :src="avatar" size="120"></u-avatar>
						</view>
						<view class="p-r-28">
							<u-icon name="arrow-right" color="#c0c4cc" szie="13"></u-icon>
						</view>
					</view>
				</view>
				<view class="avatar" @click="chooseAvatar" v-if="avatar.length == 0">
					<view class="p-l-24 aTitle">
						头像
					</view>
					<view class="av_img">
						<view class="default_letter" :class="{man:form.sex == '0',women:form.sex !== '0'}">
							{{form.name.slice(0,1)}}
						</view>
						<view class="p-r-28">
							<u-icon name="arrow-right" color="#c0c4cc" szie="13"></u-icon>
						</view>
					</view>
				</view>
				<u-field v-model="form.name" label="姓名" input-align="right" required placeholder="输入姓名"
					:border-bottom="true" placeholder-style="color: #C1C1C1;" style="margin-right: 40rpx;"></u-field>
				<u-field v-model="sex" @click="showAction" input-align="right" :disabled="true" label="性别"
					placeholder="选择性别" right-icon="arrow-right" required :border-bottom="true"
					placeholder-style="color: #C1C1C1;">
				</u-field>
				<view class="hosp_sp">
					<view class="hosp_sp_left">
						<span style="color: #fa3534;font-size: 28rpx;padding-right: 15rpx;">*</span> 医院
					</view>
					<view class="hosp_sp_right" style="padding-right: 40rpx;">
						{{form.hosp}}
						<!-- <u-icon name="arrow-right" color="#c0c4cc" szie="13" ></u-icon> -->
					</view>
				</view>
				<!-- 		<u-field v-model="form.hosp" label="医院" input-align="right" required placeholder="填写医院"
					:border-bottom="true" :disabled="true" placeholder-style="color: #C1C1C1;" right-icon="arrow-right"
					style="color: #666666 !important;"></u-field> -->
				<u-field v-model="dep" @click="showDeps" input-align="right" :disabled="true" label="科室" placeholder="选择科室"
					right-icon="arrow-right" required :border-bottom="true" placeholder-style="color: #C1C1C1;">
				</u-field>
				<u-field v-model="job" @click="showZhicheng" input-align="right" :disabled="true" label="职称"
					placeholder="选择职称" right-icon="arrow-right" required :border-bottom="true"
					placeholder-style="color: #C1C1C1;">
				</u-field>
				<u-field v-model="phoneNumber" label="手机号" input-align="right" placeholder="输入手机号" :border-bottom="true"
					placeholder-style="color: #C1C1C1;" :disabled="true" right-icon="arrow-right"
					@click="changePhone"></u-field>
				<view class="login_button" @click="toUser">
					<view class="login_but_style" v-if="!actives">
						保存信息
					</view>
					<view class="login_but_style active" v-if="actives">
						保存信息
					</view>
				</view>
				<!-- 性别下拉菜单 -->
				<u-select v-model="show" :list="list" @confirm="SexConfirm" confirm-color="#4DC0D9"
					:safe-area-inset-bottom="true" :default-value="[form.sex]" @cancel="sexCancel"></u-select>
				<u-select v-model="keshi" :list="depList" @confirm="DepConfirm" confirm-color="#4DC0D9"
					:safe-area-inset-bottom="true" :default-value="[depArr]" @cancel="depCancel"></u-select>
				<u-select v-model="zhicheng" :list="JobList" @confirm="JobConfirm" confirm-color="#4DC0D9"
					:safe-area-inset-bottom="true" :default-value="[jobArr]" @cancel="jobCancel"></u-select>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		zhicheng,
		userInfoPost,
		getDepList,
		getInfo,
		updReplenishUserInfo
	} from '@/api/index.js'
	import {
		baseURL
	} from '@/config/app'
	export default {
		data() {
			return {
				placeholder: '"color": "red"',
				form: {
					name: '',
					sex: '',
					hosp: '',
					dep: '', //科室
					job: '', //职称
					phoneNumber: ''
				},
				sex: '',
				dep: '', //科室
				depArr: '',
				jobArr: '',
				job: '', //职称
				depList: [{
						value: '1',
						label: '精神科'
					},
					{
						value: '2',
						label: '耳鼻喉'
					},
					{
						value: '3',
						label: '眼科'
					}
				],
				JobList: [],
				list: [{
						value: '0',
						label: '男'
					},
					{
						value: '1',
						label: '女'
					}
					// ,{
					// 	value: '2',
					// 	label: '未知'
					// }
				],
				show: false, //性别
				keshi: false, //科室
				zhicheng: false, //职称
				//avatar: '',
				//actives:false,   //展示哪个按钮，没填暗淡，填了更绿
				avatar: require('@/static/img/default_avatar.png'),
				filePath: '', //
				myX: require('@/static/img/myX.png'),
			}
		},
		computed: {
			actives() {
				let dep = this.form.dep?.toString() ? this.form.dep?.toString() : ''
				let job = this.form.job?.toString() ? this.form.job?.toString() : ''
				//console.log(dep.length,job.length);
				if (this.form.phoneNumber?.length > 1 && this.form.phoneNumber?.length !== 11) {
					return false
				}
				//console.log(
				// this.form.name.length, this.form.sex.length ,
				// 	dep.length ,job.length 

				//)

				if (this.form.name?.length > 0 && this.form.sex?.length > 0 &&
					dep?.length > 0 && job?.length > 0) {
					return true
				}
				return false
			},
			phoneNumber() {
				if (this.form.phoneNumber) {
					return this.form.phoneNumber.slice(0, 3) + '****' + this.form.phoneNumber.slice(7, 11)
				}
			}
			// ,sexObject(){
			// 	if(this.form.sex == 0){
			// 		return {'man':true}
			// 	}
			// 	if(this.form.sex == 1){
			// 		return {'women':true}
			// 	}
			// 	if(this.form.sex == 2){
			// 		return {'man':true}
			// 	}
			// 	return {'man':true}
			// }
		},
		onLoad() {
		
		},
		onReady() {
			this.getJobList()
		},
		methods: {
			changePhone() {
				this.$u.route('/pages/my/oldphone');
			},
			async getJobList() {
				// let that = this
				let res = await zhicheng('user_title') //职称列表
				this.JobList = res.data.map((v) => {
					return {
						value: v.dictValue,
						label: v.dictLabel
					}
				})
				//	console.log(this.JobList); 
				await this.DepList() //获得科室列表
				await this.getHosp() //获得医院，带回显修改
				uni.$on('uAvatarCropper', path => {
					this.avatar = path;
					//console.log(path);
					// 可以在此上传到服务端
					uni.uploadFile({
						url: `${baseURL}/common/commonFileUpload`,
						filePath: path,
						name: 'file',
						complete: (res) => {
							if (res.statusCode == 200) {
								let data = JSON.parse(res.data)
								this.avatar = data.url
								this.filePath = data.filePath
							} else {
								this.$u.toast('上传文件错误，请稍后上传')
							}
						}
					});
				})
			},
			async getHosp() {
				let res = await getInfo()
				//console.log(res);
				if (res.code == 200) {
					this.form.hosp = res.user.corpName
				}
				uni.setStorageSync('userinfo', {
					'permissions': res.permissions,
					'roles': res.roles,
					'user': res.user
				})
				this.form.name = res.user.nickName
				this.form.phoneNumber = res.user.phonenumber.toString()
				this.form.sex = res.user.sex
				let sexLabel = this.list.find(v => v.value == res.user.sex)
				if (sexLabel !== undefined) this.sex = sexLabel.label

				let depLabel = this.depList.find(v => v.value == res.user.deptId)
				if (depLabel !== undefined) this.dep = depLabel.label


				let jobLabel = this.JobList.find(v => v.value == res.user.userTitle)
				if (jobLabel !== undefined) this.job = jobLabel.label
				//console.log(res.user.sex);

				this.form.dep = res.user.deptId
				this.form.job = res.user.userTitle
				this.depArr = this.depList.findIndex((v, i) => this.form.dep == v.value)
				this.jobArr = this.JobList.findIndex((v, i) => this.form.job == v.value)
				//console.log(this.form.dep, this.form.job)

				if (res.user.avatar) {
					this.avatar = res.user.avatar
				} else {
					this.avatar = ''
				}
				//	console.log(this.form ,'hosp');
			},

			async DepList() {
				let res = await getDepList()
				this.depList = res.data.map((v) => {
					return {
						value: v.deptId,
						label: v.deptName
					}
				})
				//console.log(res,this.depList,'dep');
			},
			close() { //登录后又不完善个人信息
				//this.$u.toast('关闭')
				// wx.exitMiniProgram({
				// 	success: function(e) {
				// 		console.log(e,123);
				// 		uni.removeStorageSync('qw'); //清除缓存
				// 		uni.removeStorageSync('token');
				// 	}
				// })
				//console.log('rrr');
				uni.redirectTo({
					url:'/pages/index/index'
				})

			},
			sexCancel(e) {
				uni.redirectTo({
					url:'/pages/my/index'
				})
			},
			depCancel(e) {
				uni.redirectTo({
					url:'/pages/my/index'
				})
			},
			jobCancel(e) {
				uni.redirectTo({
					url:'/pages/my/index'
				})
			},
			showAction() { //打开性别菜单
				this.show = true;
			},
			showDeps() {
				this.keshi = true;
			},
			showZhicheng() {
				this.zhicheng = true;
			},
			SexConfirm(e) {
				this.sex = e[0].label //性别显示
				this.form.sex = e[0].value
				//	console.log(e);
			},
			DepConfirm(e) {
				//console.log(e);
				this.keshi = false
				//this.depArr = this.depList.findIndex((v, i) => this.form.dep == v.value)
				this.dep = e[0].label //科室显示
				this.form.dep = e[0].value
				this.depArr = this.depList.findIndex((v, i) => this.form.dep == v.value)
				//console.log(e);
			},
			JobConfirm(e) {
				this.job = e[0].label //职称显示
				this.form.job = e[0].value
				this.jobArr = this.JobList.findIndex((v, i) => this.form.job == v.value)
				//console.log(e);
			},
			chooseAvatar() {
				//console.log(123);
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			isPass() {
				if (this.form.name.length < 1) {
					this.$u.toast('请填写姓名')
					return false
				}
				if (this.form.sex.length < 1) {
					this.$u.toast('请选择性别')
					return false
				}
				// if (this.form.hosp.length < 1) {  //保存接口不用，所以也不校验了
				// 	this.$u.toast('请选择医院')
				// 	return false
				// }
				if (this.form.dep.length < 1) {
					this.$u.toast('请选择科室')
					return false
				}
				if (this.form.job.length < 1) {
					this.$u.toast('请选择职称')
					return false
				}
				if (this.form.phoneNumber.length > 1 && this.form.phoneNumber.length !== 11) {
					this.$u.toast('手机号错误')
					return false
				}
				return true
			},
			async toUser() {
				//console.log(this.form.sex);
				//return
				if (!this.isPass()) return
				let params = {
					//'avatar': this.avatar,
					'deptId': this.form.dep,
					'nickName': this.form.name,
					'sex': this.form.sex,
					'userTitle': this.form.job,
				}
				if (this.filePath) {
					params.avatar = this.filePath
				}
				if (this.form.phoneNumber) {
					params.phoneNumber = this.form.phoneNumber
				}
				//console.log(params);
				
				let myinfo = uni.getStorageSync('userinfo')
				if(myinfo && myinfo.user.nickName){
					let result = await updReplenishUserInfo(params)
					if (result.code == 200) {
						this.$u.toast(result.msg)
						uni.setStorageSync('zhichengName',this.job)
						uni.switchTab({
							url:'/pages/index/my'
						})
						//console.log(111);
					}
					return
				}
				let res = await userInfoPost(params)
				if (res.code == 200) {
					this.$u.toast(res.msg)
					uni.setStorageSync('zhichengName',this.job)
					uni.switchTab({
						url:'/pages/index/my'
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-field__input-wrap {
		color: #333;
	}

	::v-deep .u-required::before {
		left: -26rpx !important;
	}

	::v-deep .u-label-text {
		font-family: PingFang SC, PingFang SC;
		//font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
	}
	::v-deep .u-field__input-wrap{
		font-size: 32rpx !important;
	}

	.main {
		background-color: white;
		//padding-top: 30px;
		.card {
			background-color: white;
			background: white;
			padding: 0 24rpx 0 36rpx;

			.avatar {
				//border-bottom: 1px solid rgb(228, 231, 237);
				border-bottom: 1px solid #F8F8F8;
				display: flex;
				align-items: center;

				.aTitle {
					font-family: PingFang SC, PingFang SC;
					//font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
				}

				.av_img {
					flex: 1;
					padding-left: 100rpx;
					padding-top: 30rpx;
					padding-bottom: 30rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.img_box {
						margin-right: 10rpx;
						// width: 120rpx;
						// height: 120rpx;
					}

					.default_letter {
						width: 120rpx;
						height: 120rpx;

						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.man {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 60rpx;
						color: #4DC0D9;
						line-height: 70rpx;
						background-color: #F4FDFF;
					}

					.women {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 60rpx;
						color: #F1280D;
						line-height: 70rpx;
						background-color: #FFEBEB;
					}
				}
			}

			.hosp_sp {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 28rpx 20rpx 0;
				border-bottom: 1px solid #F8F8F8;

				.hosp_sp_left {
					font-family: PingFang SC, PingFang SC;
					//font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
				}

				.hosp_sp_right {
					color: #C1C1C1;
					font-size: 32rpx;
					line-height: 38rpx;
				}
			}

			.login_button {
				margin-top: 80rpx;
				padding-right: 24rpx;

				.login_but_style {
					width: 100%;
					height: 84rpx;
					font-size: 32rpx;
					background: #A6DFEC;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
				}
			}

			.active {
				background-color: #4DC0D9 !important;
			}
		}
	}
</style>